<template>
  <div class="ptp-view">
    <!-- <div class="top-tools">
      <div class="refresh-style"></div>
    </div>
    <div class="ptp-button">
      <el-button size="mini" type="">端子</el-button>
    </div> -->
    <div class="frame-style">
      <div v-if="duanziUrl === ''" />
      <iframe
        v-if="duanziUrl"
        :src="duanziUrl"
        frameborder="1"
        style="width:100%;height:100%"
      />
    </div>
  </div>
</template>
<script>

export default {
  name: 'PtpShowview',
  props: {
    planId: {
      type: String,
      default: '',
    },
    resId: {
      type: String,
      default: '',
    },
    resType: {
      type: String,
      default: '',
    },
    localConfig: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      duanziUrl: '',
    };
  },
  watch: {
    resId() {
      const that = this;
      console.log(that.localConfig);
      this.duanziUrl = `${that.localConfig.URL.duanzi}&plan_id=${that.planId}&id=${that.resId}&type=${that.resType}&data_source=2`;
    },
  },
  mounted() {
    if (this.resId !== '') {
      this.duanziUrl = `${this.localConfig.URL.duanzi}&plan_id=${this.planId}&id=${this.resId}&type=${this.resType}&data_source=2`;
    } else {
      this.duanziUrl = '';
    }
  },
};
</script>
<style lang="scss" scoped>
.ptp-view{
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 12px;
  background: #EBF4FF;
  flex-direction: column;
  .top-tools{
    height: 28px;
    padding-top: 12px;
    background: #5578EC;
    padding-bottom: 10px;
    .refresh-style{
      cursor: pointer;
      border-radius: 50%;
      width: 16px;
      color: #fff;
      height: 16px;
      border:2px solid currentColor;
      border-left:2px solid transparent;
      position: relative;
      // margin-right: 6px;
      margin-left: 16px;
      &:hover{
        animation: loading 1s infinite linear;
        -moz-animation: loading 1s infinite linear;      /* Firefox */
        -webkit-animation: loading 1s infinite linear;   /* Safari 和 Chrome */
        -o-animation: loading 1s infinite linear;        /* Opera */
      }
    }
    .refresh-style::after{
      content: "";
      width: 5px;
      height: 5px;
      border-bottom: 2px solid currentColor;
      border-left: 2px solid currentcolor;
      position: absolute;
      top: 11px;
      left: -1px;
      transform: rotate(90deg);
    }
    @keyframes loading {
      from {transform: rotate(0deg);}
      to {transform: rotate(359deg);}
    }
  }
  .ptp-button{
    text-align: left;
    margin-left: 20px;
    margin-top: 30px;
  }
  .frame-style{
    margin: 10px;
    width: calc(100% - 20px);
    height: 100%;
  }
}
</style>
